<!DOCTYPE html>
<!--
    quirli, replay with ease.
    Copyright (C) 2014 by marcel suter, marcel@codeministry.ch

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="en" />
    <meta name="Copyright" content="GPLv3 licensed by codeministry.ch" />
    <meta name="dc.language" content="en" />
    <meta name="geo.country" content="CH" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Media player for replay and rehearsal with cues.">
    <meta name="author" content="codeministry.ch">
    <link rel="shortcut icon" href="img/favicon.ico">

    <title>quirli - replay and share media with cues</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">    
    <!-- Bootstrap theme -->
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">    
    <!-- use a customized bootstrap version for quirli, postpending the Bootstrap core CSS.-->
    <link href="bootstrap/css/quirli-mods.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="bootstrap/css/navbar-fixed-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body role="document">
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">quirli
                    <img src="img/quirli_app_icon_16x16.png" />
                    <small><em>replay with ease.</em></small>&nbsp;<span class="label label-danger">Beta</span></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          	<!--nothing to show here right now -->
           </ul>
          <ul class="nav navbar-nav navbar-right">
          	<!--nothing to show here right now -->
           </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>    
    <div class="container">
        <!--Main content-->
        quirli is a free media player for replay and rehearsal. It's main feature is fast navigation to predefined cue points in the media.<br />
        <br />
        <img src="img/HowItWorks.png" alt="A visual overview over how quirli works." class="img-responsive"/>
        <!-- lay out the following paragraphs as "tiles-->
        <div class="row">
        <div class="col-md-6">
	        <h3 class="nobr">How does it work?</h3>
	        <ol>
	            <li>You enter a link to a media file or YouTube video you want to use.</li>
	            <li>As the media plays, you press a button at the desired points in time to create cues. Name and edit the cues.</li>
	            <li>Generate a link to quirli with your cues contained, for keeping as bookmark or to share with your friends.</li>
	            <li>Use the link to start playing from the cues.</li>
	        </ol>
	    </div>
        <div class="col-md-3">
            <!--Facebook link-->
            <iframe src="http://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fquirliplayer&amp;layout=standard&amp;show_faces=false&amp;colorscheme=light&amp;font&amp;width=250" scrolling="no" frameborder="0" style="border: none; overflow: hidden; height: 35px; width: 250;" allowtransparency="true"></iframe>
            <br />
            <!-- Google+ link-->
            <a href="http://plus.google.com/100181444156260536348?prsrc=3" rel="publisher" style="text-decoration: none;">
                <img src="http://ssl.gstatic.com/images/icons/gplus-16.png" alt="Google+" style="border: 0; width: 16px; height: 16px;" /></a>
            <!-- Jumbo "Get started" button-->    
            <h1><a class="btn btn-primary btn-lg" href="player.html">Get started!</a></h1>
	    </div>
        <div class="col-md-3">
            <h3>Examples:</h3>
            <p style="line-height: 2.6em">
                <a class="btn btn-primary" href="player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0VqTwnAuHws&title=What%20makes%20you%20beautiful&artist=The%20piano%20guys%20covering%20One%20Republic&album=Youtube&6.49=Intro&30.12=Knocking%20part&46.02=Real%20playing&51.5=Piano%20forte&93.32=Stringified&123.35=Vocals&139.38=Key%20cover%20jam&150.16=Good%20morning%20sky&173.96=Final%20chord"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;From a Youtube video</a>                       
                    <br />
                <a class="btn btn-primary" href="player.html?media=media%2Flidija_roos-sweet_taste.mp3&title=Sweet%20taste&artist=Lidija%20Roos&album=Not%20for%20sale&0=Intro&15=Verse%201&45.5=Verse%202&75.94=Chorus&106.75=Verse%203&140.75=Chorus&172.07=Bridge&201.65=Chorus&232.65=Outro"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;From an MP3 file</a>                       
                    <br />
                <a class="btn btn-primary" href="player.html?media=media%2FLidija%2520Roos%2520-%2520Your%2520Light.wav&title=Your%20Light&artist=Lidija%20Roos&album=Not%20for%20sale&0=Intro&17.47=Verse%201&50.89=Chorus&67.84=Verse%202&101.11=Chorus&118.15=Chorus&138.60=Instrumental&152.52=Chorus&169=Bridge&184=Chorus&202.50=Chorus%20Repeat&219.21=Chorus%20Outro"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;From a WAV file</a>                       
                    <br />
                <a class="btn btn-primary" href="playlist.html"><span class="glyphicon glyphicon-list"></span>&nbsp;Demo playlist</a>                       
                    <br />                
            </p>     
        </div>
        <div class="col-md-6">
	        <h3>Supported media types</h3>
	        Supported media types are <em>mp3</em>, <em>wav</em>, <em>mp4</em>, <em>webm</em>, <em>ogv</em>, <em>ogg</em> and <em>youtube</em>, given your browser can play it. The media is played using <a href="http://mediaelementjs.com/">MediaelementJS</a>.
	    </div>
        <div class="col-md-6">        
            <h3>Who can use it?</h3>
        quirli is primarily aimed at musicians, singers and choir conductors who want to rehearse with playback music. You can however use it to provide access to specific parts of any media file regardless of it's content.
        </div>
        <div class="col-md-6">
            <h3>Troubleshooting</h3>
        <dl>
            <dt>Media is not played at all</dt>
            <dd>For certain media file types on certain browsers (e.g. mp3 on Firefox), you need to have the Adobe&reg; Flash&reg; Player plugin installed, enabled and configured. 
                    This is expecially true, if you run quirli from the local filesystem. See <a href="localflashconfig.html">how to configure Flash&reg; for local filesystem usage</a>.</dd>
        </dl>
        </div>
        <div class="col-md-6">
        	<h3>Replayer</h3>quirli aims to support and extend the existing <a href="http://home.codeministry.ch/main/replayer/">Replayer desktop application</a> for the Microsoft Windows OS.
        </div>
        <div class="col-md-6">
	        <h3>API</h3>
        	<h4>Track API</h4>
        	quirli supports loading of a track directly by sending a specially crafted URL in the HTTP request to quir.li, like below:
            <pre>http://quir.li/player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0VqTwnAuHws&title=What%20makes%20you%20beautiful&artist=The%20piano%20guys%20covering%20One%20Republic&album=Youtube&6.49=Intro&30.12=Knocking%20part&46.02=Real%20playing&51.5=Piano%20forte&93.32=Stringified&123.35=Vocals&139.38=Key%20cover%20jam&150.16=Good%20morning%20sky&173.96=Final%20chord</pre>
	        <dl>
	            <dt>Location (<code>http://quir.li/player.html</code>)</dt>
	            <dd>Points to the location where the quirli player can be found. While this is usually the web address as in the example, you may also install a copy of quirli on your own server or even on a local disk.</dd>
	            <dt>Query delimiter (<code>?</code>)</dt>
	            <dd>Separates the location from the arguments, which also called the query part in the URL specification. The arguments are split by an ampersand <code>&</code> character and consist of a key, the equals operator <code>=</code> and the value. All arguments are optional, and their order is not relevant.</dd>
	            <dt>media argument (<code>media=</code>)</dt>
	            <dd>The URL to the media file to load for this track. The URL must be <a href="http://www.w3schools.com/tags/ref_urlencode.asp">encoded</a> to avoid interference with the other arguments. You may leave this out if you do not want to share the link to the media file or if the link points to a local file on your disk anyway.</dd>
	            <dt>title argument (<code>title=</code>)</dt>
	            <dd>The title for this track. You can set this to whatever you find suitable.</dd>
	            <dt>artist argument (<code>artist=</code>)</dt>
	            <dd>The artist performing this track. You can set this to whatever you find suitable.</dd>
	            <dt>album argument (<code>album=</code>)</dt>
	            <dd>The album or place where this track can be found. You can set this to whatever you find suitable.</dd>
	            <dt>cue argument(s) (<code>nn.nn=XXX</code>)</dt>
	            <dd>The cues to present, with their caption. The key is a floating point number indicating the position within the media file, in seconds from the start. You may use up to two digits after the decimal point. The value is a caption (free text, can also be empty) for the cue and can have any lenght. You can specify any number of cues. The order of the cue keys is reflected in the player view.</dd>
	        </dl>
	        To be working with most browsers, a total lenght of the resulting URL of 2000 characters should not get exceeded.
            <h4>Playlist API</h4>
        To pre-load quirli with more than one track, you can use the playlist API. To do so, a specially crafted JSONP file with the name <code>playlistcontent.jsonp</code> can get delivered along with the player.
            Both the player (in the playlist view) and the fullsized playlist page then load the tracks from the JSONP file. <em>Currently, the playlist can not get loaded from another location, nor via an URL query argument. This API will change later.</em>
        Example:
            <pre class="pre-scrollable">
callback_json1({
  "title": "Demo playlist for various media formats",
  "tracks": [
  {"title":"Nice track from the Piano Guys (YouTube)","url":"player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0VqTwnAuHws&title=What%20makes%20you%20beautiful&artist=The%20piano%20guys%20covering%20One%20Republic&album=Youtube&6.49=Intro&30.12=Knocking%20part&46.02=Real%20playing&51.5=Piano%20forte&93.32=Stringified&123.35=Vocals&139.38=Key%20cover%20jam&150.16=Good%20morning%20sky&173.96=Final%20chord"},
  {"title":"Dreaming with the Piano Guys (YouTube)","url":"player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjzF_y039slk&title=Over%20the%20Rainbow&artist=The%20Piano%20Guys&album=Youtube&0=Intro&7.46=Strummin'%20the%20cello&43.51=Piano%20appearance&89.11=Dreamin'%20away&164.24=Greenfield%20openair"},
  {"title":"Space Shuttle Discovery Launch (YouTube)","url":"player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DxRVHylmxUk8&title=Discovery%20Launch%20Captured%20by%20Multiple%20Cameras&artist=NASATelevision&album=Youtube&0=Go%3F&30.89=Preparation&64.01=To%20the%20lauchpad&188.79=On%20the%20pad&257.75=Ignition&286.2=Lift-Off&346.73=The%20turn&447.20=Booster%20separation&510.92=Booster%20touchdown&535.14=Into%20space&629.79=Liquit%20tank%20separation&670.32=Orbiting&720.37=Farewell"},
  {"title":"Beautiful song by Lidija Roos (mp3)","url":"player.html?v=0.21&media=media%2Flidija_roos-sweet_taste.mp3&title=Sweet%20taste&artist=Lidija%20Roos&album=Not%20for%20sale&0=Intro&15=Verse%201&45.5=Verse%202&75.94=Chorus&106.75=Verse%203&140.75=Chorus&172.07=Bridge&201.65=Chorus&232.65=Outro"},
  {"title":"Echo trailer (mp4)","url":"player.html?media=media%2Fecho-hereweare.mp4&title=Here we are&artist=The echo conference&album=&0=We are here to&2.3=echo&31.02=Because&32.5=WE ARE&36.9=OF HIS HANDS"},
  {"title":"Echo trailer (ogv)","url":"player.html?media=media%2Fecho-hereweare.ogv&title=Here we are&artist=The echo conference&album=&0=We are here to&2.3=echo&31.02=Because&32.5=WE ARE&36.9=OF HIS HANDS"},
  {"title":"Echo trailer (webm)","url":"player.html?media=media%2Fecho-hereweare.webm&title=Here we are&artist=The echo conference&album=&0=We are here to&2.3=echo&31.02=Because&32.5=WE ARE&36.9=OF HIS HANDS"}
  ]
});            </pre>
        </div>
        <div class="col-md-6">
	        <h3>Roadmap</h3>
	        See the <a href="https://trello.com/board/quirli/4f99c2814ae135692dda8907">Trello board</a> for an updated roadmap.
		        Your most wanted feature is missing? <a href="http://www.codeministry.ch/contact">Get in contact with the author.</a>
		</div>
        <div class="col-md-6">        	
	        <h3>Credits</h3>
	        Many thanks! quirli would not be possible without them!
	            <ul>
	                <li>The quirli icon is based on <a href="http://commons.wikimedia.org/wiki/Category:Crystal_icons">the crystal icon set by Everaldo Coelho</a> (<a href="http://en.wikipedia.org/wiki/LGPL">LGPL License</a>).</li>
	                <li>UI styling is made with <a href="http://getbootstrap.com">Bootstrap</a>. (<a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>).</li>
	                <li>The small action icons are from <a href="http://glyphicons.com/">Glyphicons</a>. (<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0 License</a>).</li>
	                <li>JavaScript DOM support is by <a href="http://jquery.com/">jQuery</a> (<a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>).</li>
	                <li>JavaScript binding support is by <a href="http://angularjs.org/">AngularJs</a> (<a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>).</li>
	                <li>The underlying media player is <a href="http://mediaelementjs.com/">MediaelementJS</a> by John Dyer (<a href="http://en.wikipedia.org/wiki/MIT_License">GPLv2 License</a>/<a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>).</li>
	                <li>JSONP support is by <a href="http://www.nonobtrusive.com/2010/05/20/lightweight-jsonp-without-any-3rd-party-libraries/">Nonobtrusive Lightweight JSONP</a>.</li>
	                <li>Development environment is <a href="http://www.eclipse.org/downloads/">Eclipse IDE</a>.</li>
	                <li>Development environment is also <a href="http://www.visualstudio.com/en-us/downloads/download-visual-studio-vs">Visual Studio Express 2012 for Web.</a></li>
	                <li>Development environment is also <a href="http://www.aptana.com/">Aptana Studio 3</a>.</li>
	            </ul>
		</div>	
        </div><!-- /row -->
    </div>    <!-- /container -->
	
    <!-- Footer (repeated on every page intentionally, as iframes with the seamless attribute are not yet universally supported)
        ================================================== -->
    <div id="footer">
      <div class="container">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Created by <a href="http://www.codeministry.ch">codeministry.ch</a>. Hosted by <a href="http://www.cyon.ch">cyon.ch</a>.
        <br/>	
        Licensed under the open source <a href="gpl-3.0.txt">GPLv3 License</a>
			<span class="muted">&nbsp;&middot;&nbsp;</span>
			<a href="http://quirli.codeplex.com">Source</a>
			<span class="muted">&nbsp;&middot;&nbsp;</span>
			<a href="disclaimer.txt">Disclaimer</a>
		</p>
      </div>
    </div> <!-- /footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="jquery/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
